<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Main</title>
<link rel="stylesheet"
	href="jscript/jquery-ui/dev-bundle/themes/base/jquery.ui.all.css">
<link rel="stylesheet"
	href="jscript/local/style.css">
<script src="jscript/jquery/jquery-1.6.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.core.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.widget.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.tabs.js"></script>
<script src="jscript/jquery-ui/dev-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.mouse.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.button.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.draggable.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.position.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.resizable.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.ui.dialog.js"></script>
<script src="jscript/jquery-ui/dev-bundle/ui/jquery.effects.core.js"></script>

<script src="jscript/local/myscript.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>

<style type="text/css">
body {
	font-size: 62.5%;
}

table {
	font-size: 1em;
}

/* Site
   -------------------------------- */
body {
	font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana",
		"sans-serif";
	width: 720px;
	
}
.ui-widget-content{padding:.3em; margin: .3em;}
</style>
</head>
<body>
	<div id="fb-root"></div>
	<script>
		$(document).ready(function(){
			$("button").button();
			$("#tabs").tabs({
						ajaxOptions : {
							error : function(xhr, status, index, anchor) {
								$(anchor.hash)
										.html(
												"Couldn't load this tab. We'll try to fix this as soon as possible. "
														+ "If this wouldn't be a demo.");
							}
						}
					});
			
			// initialize the library with the API key
		    FB.init({ apiKey: '9d0d332434f2e05e8db1317263f00894' });

		    // fetch the status on load
		    FB.getLoginStatus(handleSessionResponse);

		    $('#btnLogin').bind('click', function() {
		      FB.login(handleSessionResponse);
		    });

		    $('#btnLogout').bind('click', function() {
		      FB.logout(handleSessionResponse);
		    });

		    $('#disconnect').bind('click', function() {
		      FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
		        clearDisplay();
		      });
		    });

		    // no user, clear display
		    function clearDisplay() {
		      $('#user-info').hide('fast');
		    }

		    // handle a session response from any of the auth related calls
		    function handleSessionResponse(response) {
		      // if we dont have a session, just hide the user info
		      if (!response.session) {
		        clearDisplay();
		        return;
		      }

		      // if we have a session, query for the user's profile picture and name
		      FB.api(
		        {
		          method: 'fql.query',
		          query: 'SELECT name, pic FROM profile WHERE id=' + FB.getSession().uid
		        },
		        function(response) {
		          var user = response[0];
		          $('#user-info').html('<img src="' + user.pic + '">' + user.name).show('fast');
		        }
		      );
		    }
		});
		
	</script>
	<div id="header" class="ui-widget-content ui-corner-all">
		<h1>MyKet</h1>
		<button id="btnLogin">login</button>
		<button id="btnLogout">logout</button>
		<button id="disconnect">disconnect</button>
		<div id="user-info" style="display: none;"></div>
	</div>
	<div id="tabs">
		<ul>
			
			<li><a href="ajaxcontent/sell_list.html">SELL</a></li>
			<li><a href="ajaxcontent/wish_list.html">WISH</a></li>
		</ul>
	</div>

</body>
</html>